<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="jslib/mustache.js"></script>
  <div id="container">

  </div>
  <script>
    var templateStr = `
      <ul>
        {{#arr}}
          <li>{{name}}的爱好是:
            <ol>
              {{#hobbies}}
                <li>{{.}}</li>
              {{/hobbies}}
            </ol>
          </li>
        {{/arr}}  
      </ul>
    `;
    
    var data = {
      arr:[
        {'name':'小明','age':12,'hobbies':['游泳','羽毛球']},
        {'name':'小红','age':11,'hobbies':['编程','写作文','看报纸']},
        {'name':'小强','age':13,'hobbies':['打台球']},
      ]
    };
  
    var domStr = Mustache.render(templateStr,data);
    var container = document.getElementById('container');
    container.innerHTML = domStr;
  </script>
</body>
</html>